<!-- 发现 -->
<template>
  <div class="find">
    <!-- 刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="refresh">
      <!-- 顶部banner -->
      <van-swipe
        :autoplay="3000"
        loop
        touchable
        indicator-color="#f95b59"
        class="swiper"
      >
        <van-swipe-item v-for="(image, index) in banner" :key="index">
          <img v-lazy="image.pic" :src="image.pic" :alt="image.typeTitle" />
        </van-swipe-item>
      </van-swipe>

      <!-- 发现页数据 -->
      <div v-for="(item, index) in discoverData" :key="index">
        <!-- 歌单精选 -->
        <div class="songList" v-if="item.showType == 'HOMEPAGE_SLIDE_PLAYLIST'">
          <div class="title">
            <h2>{{ item.uiElement.subTitle.title }}</h2>
            <van-button type="default" class="btn" round>
              <span
                class="iconfont icon-bofang2"
                v-if="item.uiElement.button.actionType == 'client_customized'"
              ></span>
              {{ item.uiElement.button.text }}</van-button
            >
          </div>
          <div class="songBox">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide
                v-for="(songItem, idx) in item.creatives"
                :key="idx"
                class="item"
              >
                <img :src="songItem.uiElement.image.imageUrl" />

                <div class="amount">
                  <span class="iconfont icon-bofang1"></span>
                  <span
                    >{{
                      Math.round(
                        songItem.resources[0].resourceExtInfo.playCount / 10000
                      ) > 10000
                        ? Math.round(
                            songItem.resources[0].resourceExtInfo.playCount /
                              100000000
                          ) + "亿"
                        : Math.round(
                            songItem.resources[0].resourceExtInfo.playCount /
                              10000
                          ) + "万"
                    }}
                  </span>
                </div>
                <p class="contont">
                  {{ songItem.uiElement.mainTitle.title }}
                </p>
              </swiper-slide>
            </swiper>
          </div>
        </div>

        <!-- 一页三行的歌曲 -->
        <div
          class="songList"
          v-if="item.showType == 'HOMEPAGE_SLIDE_SONGLIST_ALIGN'"
        >
          <div class="title">
            <h2>{{ item.uiElement.subTitle.title }}</h2>
            <van-button type="default" class="btn" round>
              <span
                class="iconfont icon-bofang2"
                v-if="item.uiElement.button.actionType == 'client_customized'"
              ></span
              >{{ item.uiElement.button.text }}</van-button
            >
          </div>
          <div class="songBox">
            <swiper :options="swiperLine" ref="swiperLine">
              <swiper-slide
                v-for="(songItem, idx) in item.creatives"
                :key="idx"
                class="item"
              >
                <div
                  v-for="(items, indz) in songItem.resources"
                  :key="indz"
                  class="item_box"
                  :data-index="index"
                  :data-type="item.showType"
                  @click="clickSong($event, items)"
                >
                  <img
                    :src="items.uiElement.image.imageUrl"
                    alt=""
                    style="width:58PX;height:51PX"
                  />
                  <div class="content">
                    <div class="item_content">
                      <p>
                        <span>{{ items.uiElement.mainTitle.title }} </span>
                        <span
                          >- {{ items.resourceExtInfo.artists[0].name }}</span
                        >
                      </p>
                      <span v-if="items.uiElement.subTitle" class="tag">{{
                        items.uiElement.subTitle.title
                      }}</span>
                    </div>
                    <p class="play">
                      <span class="iconfont icon-bofang2"></span>
                    </p>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>

        <!-- 音乐日历 -->
        <div class="calendar" v-if="item.showType == 'SHUFFLE_MUSIC_CALENDAR'">
          <div class="box">
            <div class="title">
              <h2>{{ item.uiElement.subTitle.title }}</h2>
            </div>

            <div class="content">
              <swiper :options="swiperCalendar" ref="swiperCalendar">
                <swiper-slide
                  v-for="(songItem, idx) in item.creatives"
                  :key="idx"
                  class="items"
                >
                  <div class="text">
                    <p>
                      {{
                        judgedate(songItem.resources[0].resourceExtInfo.endTime)
                      }}
                    </p>
                    <p>{{ songItem.resources[0].uiElement.mainTitle.title }}</p>
                  </div>
                  <div class="img">
                    <img
                      style="width: 58px;height: 52px;"
                      :src="songItem.resources[0].uiElement.image.imageUrl"
                    />
                  </div>
                </swiper-slide>
              </swiper>
            </div>
          </div>
        </div>

        <!-- 淡入播放列表 -->
        <div class="songList" v-if="item.showType == 'HOMEPAGE_SLIDE_MLOG'">
          <div class="title">
            <h2>{{ item.uiElement.subTitle.title }}</h2>
            <van-button type="default" class="btn" round>
              <span
                class="iconfont icon-bofang2"
                v-if="item.uiElement.button.actionType == 'client_customized'"
              ></span
              >{{ item.uiElement.button.text }}</van-button
            >
          </div>
          <div class="songBox">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide
                v-for="(songItem, idx) in item.extInfo.squareFeedViewDTOList"
                :key="idx"
                class="items"
              >
                <div class="img_box">
                  <img :src="songItem.resource.mlogBaseData.coverUrl" />
                  <span class="zan"
                    >{{ songItem.resource.mlogExt.likedCount }}赞</span
                  >
                </div>
                <p class="contont">
                  {{ songItem.resource.mlogBaseData.text }}
                </p>
              </swiper-slide>
            </swiper>
          </div>
        </div>

        <!-- 类似歌单精选样式(直播) -->
        <div
          class="songList"
          v-if="item.showType == 'HOMEPAGE_SLIDE_LISTEN_LIVE'"
        >
          <div class="title">
            <h2>{{ item.uiElement.subTitle.title }}</h2>
            <van-button type="default" class="btn" round>
              <span
                class="iconfont icon-bofang2"
                v-if="item.uiElement.button.actionType == 'client_customized'"
              ></span
              >{{ item.uiElement.button.text }}</van-button
            >
          </div>
          <div class="songBox">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide
                v-for="(songItem, idx) in item.extInfo"
                :key="idx"
                class="item"
              >
                <img :src="songItem.verticalCover" />
                <p class="xuanfu">
                  <span class="num">{{ songItem.popularity }} </span>
                  <span>· {{ songItem.privateTag }}</span>
                </p>
                <p class="contont">
                  {{ songItem.title }}
                </p>
              </swiper-slide>
            </swiper>
          </div>
        </div>

        <!-- 新歌新碟(一页三行) -->
        <div
          class="songList"
          v-if="item.showType == 'HOMEPAGE_NEW_SONG_NEW_ALBUM'"
        >
          <div class="title">
            <div class="newSong">
              <van-button
                type="default"
                @click="setSong('NEW_SONG_HOMEPAGE')"
                :class="creativeTypes == 'NEW_SONG_HOMEPAGE' ? 'bold' : ''"
                >新歌</van-button
              >
              <span>|</span>
              <van-button
                type="default"
                @click="setSong('NEW_ALBUM_HOMEPAGE')"
                :class="creativeTypes == 'NEW_ALBUM_HOMEPAGE' ? 'bold' : ''"
                >新碟</van-button
              >
            </div>

            <van-button type="default" class="btn" round>更多新歌</van-button>
          </div>
          <div class="songBox">
            <swiper :options="swiperLine" ref="swiperLine">
              <swiper-slide
                v-for="(songItem, idx) in newSongs(item.creatives)"
                :key="idx"
                class="item"
              >
                <div
                  v-for="(items, indz) in songItem.resources"
                  :key="indz"
                  class="item_box"
                >
                  <img
                    :src="items.uiElement.image.imageUrl"
                    alt=""
                    style="width:58PX;height:51PX"
                  />
                  <div class="content">
                    <div class="item_content">
                      <p>
                        <span>{{ items.uiElement.mainTitle.title }} </span>
                        <span v-if="items.resourceExtInfo"
                          >- {{ items.resourceExtInfo.artists[0].name }}</span
                        >
                      </p>
                      <span v-if="items.uiElement.subTitle" class="tag">{{
                        items.uiElement.subTitle.title
                      }}</span>
                    </div>
                    <p
                      class="play"
                      v-show="creativeTypes == 'NEW_SONG_HOMEPAGE'"
                    >
                      <span class="iconfont icon-bofang2"></span>
                    </p>
                  </div>
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>

        <!-- 电台推荐 -->
        <div
          class="songList"
          v-if="item.showType == 'HOMEPAGE_SLIDE_PLAYABLE_RESOURCE'"
        >
          <div class="title">
            <h2>{{ item.uiElement.subTitle.title }}</h2>
            <van-button type="default" class="btn" round>{{
              item.uiElement.button.text
            }}</van-button>
          </div>
          <div class="songBox">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide
                v-for="(songItem, idx) in item.creatives"
                :key="idx"
                class="item"
              >
                <img :src="songItem.uiElement.image.imageUrl" />
                <p class="plays">
                  <span class="iconfont icon-bofang2"></span>
                </p>
                <p class="contont station">
                  <span>{{ songItem.uiElement.mainTitle.title }}</span>
                  <span>{{ songItem.uiElement.subTitle.title }}</span>
                </p>
              </swiper-slide>
            </swiper>
          </div>
        </div>

        <!-- 云村KTV -->
        <div class="songList" v-if="item.showType == 'HOMEPAGE_SLIDE_FUN_CLUB'">
          <div class="title">
            <h2>{{ item.extInfo.subtitle }}</h2>
            <van-button type="default" class="btn" round>{{
              item.extInfo.buttonTitle
            }}</van-button>
          </div>
          <div class="songBox">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide
                v-for="(songItem, idx) in item.extInfo.roomInfoList"
                :key="idx"
                class="item"
              >
                <img :src="songItem.bgUrl" />
                <p class="xuanfu">
                  <span>{{ songItem.label }}</span>
                </p>
                <span class="contont_title">
                  {{ songItem.title }}
                </span>
                <div class="imgList">
                  <img
                    v-for="(imgItem, inc) in songItem.onlineUserList"
                    :key="inc"
                    :src="imgItem.avatarUrl"
                    class="minImg"
                    v-show="songItem.bgUrl != imgItem.avatarUrl"
                    :style="{ 'z-index': songItem.onlineUserList.length - inc }"
                  />
                </div>
              </swiper-slide>
            </swiper>
          </div>
        </div>

        <!-- 24小时播客 -->
        <div
          class="songList"
          v-if="item.showType == 'SLIDE_PLAYABLE_DRAGON_BALL'"
        >
          <div class="title">
            <h2>{{ item.uiElement.subTitle.title }}</h2>
          </div>
          <div class="songBox">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide
                v-for="(songItem, idx) in item.creatives"
                :key="idx"
                class="item"
              >
                <div style="position:relative">
                  <img
                    :src="songItem.uiElement.image.imageUrl"
                    style="width:94px;height:84px;border-radius:50%"
                  />
                  <div class="zanting">
                    <span class="iconfont icon-shipin"></span>
                  </div>
                </div>

                <p class="contont" style="text-align:center;color:black">
                  {{ songItem.uiElement.mainTitle.title }}
                </p>
              </swiper-slide>
            </swiper>
          </div>
        </div>

        <!-- 播客合辑 -->
        <div class="songList" v-if="item.showType == 'SLIDE_VOICELIST'">
          <div class="title">
            <h2>{{ item.uiElement.subTitle.title }}</h2>
            <van-button type="default" class="btn" round>
              <span
                class="iconfont icon-bofang2"
                v-if="item.uiElement.button.actionType == 'client_customized'"
              ></span>
              {{ item.uiElement.button.text }}</van-button
            >
          </div>
          <div class="songBox">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide
                v-for="(songItem, idx) in item.creatives"
                :key="idx"
                class="item"
              >
                <img :src="songItem.uiElement.image.imageUrl" />
                <p class="contont">
                  {{ songItem.uiElement.mainTitle.title }}
                </p>
              </swiper-slide>
            </swiper>
          </div>
        </div>
      </div>
    </van-pull-refresh>

    <!--引入底部播放器栏  -->
    <player :showSing="showSing"></player>

    <!-- 播放歌曲详情页 -->
    <sing :showSing="showSing"> </sing>

    <audio
      @timeupdate="alreadyPlay"
      @ended="endMusic"
      ref="audios"
      :src="showSing.value ? showSing.value.url : ''"
      autoplay="autoplay"
      controls="controls"
    ></audio>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

//底部播放器组件
import player from "../components/player";
import sing from "../components/sing";

//播放歌曲详情页

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    Swiper,
    SwiperSlide,
    player,
    sing,
  },
  directives: {
    swiper: directive,
  },

  data() {
    //这里存放数据
    return {
      banner: [],
      count: 0,
      isLoading: false,
      songLists: [],
      discoverData: [],
      gedantuijian: {
        title: "",
        button: "",
        choiceness: [], //精选歌单
      },

      //一行的swiper
      swiperOption: {
        loadPrevNext: true,
        slidesPerView: 3.4, //显示3个
        spaceBetween: 9, //每个item间距
        freeModeSticky: true, //使得freeMode也能自动贴合
        freeMode: true, //slide会根据惯性滑动可能不止一格
        slidesOffsetBefore: 15, //偏移
        slidesOffsetAfter: 15,
        lazyLoading: true, //懒加载开启
      },
      //一列三行swiper
      swiperLine: {
        slidesPerView: 1.1, //显示3个
        freeModeSticky: true,
        slidesOffsetBefore: 15,
        slidesOffsetAfter: 15,
      },
      //淡入淡出
      swiperCalendar: {
        autoplay: true, //可选选项，自动滑动
        effect: "fade", //切换效果淡入
        fadeEffect: {
          crossFade: true,
        },
      },
      creativeTypes: "NEW_SONG_HOMEPAGE", //1为新歌,2位新碟

      showSing: false, //歌曲显示

      clickSongIndex: Number,
    };
  },
  filters: {},
  //监听属性 类似于data概念
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },

    //筛选数据类型
    newSongs() {
      return function(params) {
        let arr = [];
        params.forEach((element) => {
          if (element.creativeType == this.creativeTypes) {
            arr.push(element);
          }
        });
        return arr;
      };
    },

    //时间戳判断是今天还是明天
    judgedate() {
      return function(time) {
        let now = new Date(time);
        let m = now.getDate();
        let x = new Date();
        let f = x.getDate();
        if (m == f) {
          return "今天";
        } else if (m - 1 == f) {
          return "明天";
        } else {
          return m + "号";
        }
      };
    },
  },
  //监控data中的数据变化
  watch: {
    //监听播放暂停状态
    "$store.state.audioControl.isPlaying": {
      deep: true, //深度监听
      handler(newV, oldV) {
        //这个函数必须叫handler,
        //深度监听一个对象的时候,这两个形参对应的都是新值
        console.log(newV, oldV);
        let isPlaying = oldV;
        if (isPlaying) {
          this.$refs.audios.pause();
        } else {
          this.$refs.audios.play();
        }
      },
    },
  },
  //方法集合
  methods: {
    //刷新
    onRefresh() {
      this.discoverAPI();
    },

    //点击切换新歌或新碟
    setSong(value) {
      this.creativeTypes = value;
    },

    //发现页数据
    discoverAPI() {
      this.axios
        .get("http://localhost:3000/homepage/block/page")
        .then((res) => {
          if (res.status == 200) {
            this.$toast("刷新成功");
            this.isLoading = false;
            this.count++;
            this.discoverData = res.data.data.blocks;
            console.log(res.data.data.blocks);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //点击歌曲播放
    clickSong(e, songID) {
      let type = e.target.dataset.type;
      if (type == "HOMEPAGE_SLIDE_SONGLIST_ALIGN") {
        this.dispose(e, songID);
      }
    },

    async dispose(e, songID) {
      if (this.clickSongIndex != songID.resourceId) {
        //点击歌曲第一下播放
        this.clickSongIndex = songID.resourceId;
        this.$store.commit("alterSongShow", true);
        this.$store.commit("isPlaying", true);
        this.showSing = await this.getSing(songID);
        console.log(this.showSing);
      } else if (this.clickSongIndex == songID.resourceId) {
        // 点击歌曲第2下播放
        this.$store.commit("alterSingShow", true);
      }

      let data = this.discoverData[e.target.dataset.index];
      let disposeList = [];
      data.creatives.forEach((ele) => {
        ele.resources.forEach((it) => {
          disposeList.push(it);
        });
      });

      //将此类型歌曲列表和当前点击的歌曲id传给vuex
      this.$store.commit("misicList", {
        list: disposeList,
        index: songID.resourceId,
      });
    },

    //调取歌曲详情信息API
    getSing(songID) {
      let data = {
        itemData: songID,
        value: {},
      };

      let content = new Promise((resolve, reject) => {
        this.axios
          .get("http://localhost:3000/song/url", {
            params: {
              id: songID.resourceId,
            },
          })
          .then((res) => {
            data.value = res.data.data[0];
            resolve(data);
            console.log(data);
            this.getmusicItem(songID.resourceId);
          })
          .catch((err) => {
            reject(err);
            console.log(err);
          });
      });
      return content;
    },

    //获取歌曲时长秒
    getmusicItem(ids) {
      this.axios
        .get("http://localhost:3000/song/detail", {
          params: {
            ids,
          },
        })
        .then((res) => {
          console.log(res);
          this.$store.commit("musicDt", res.data.songs[0].dt);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //获取歌曲已播放时长
    alreadyPlay() {
      this.$store.commit("alreadyPlay", this.$refs.audios.currentTime);
    },

    //音乐播放结束
    endMusic() {
      console.log("播放结束");
      this.$store.commit("isPlaying", true);
    },
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log("Current Swiper instance object", this.swiper);
    console.log(this.item.creatives);
    // this.swiper.slideTo(3, 1000, false);
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    //banner接口获取
    this.axios
      .get("http://localhost:3000/banner?type=1")
      .then((res) => {
        if (res.status == 200) {
          this.banner = res.data.banners;
        }
      })
      .catch((err) => {
        console.log(err);
      });

    //调取发现页数据
    this.discoverAPI();

    //获取autio当前播放状态
    this.$nextTick(function() {
      let play = this.$refs.audios.paused;
      this.$store.commit("isPlaying", play);
    });
  },

  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss">
.find {
  margin-top: 54px;
  padding-bottom: 50px;
  .swiper {
    width: 100%;
    height: 140px;
    .van-swipe-item {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img {
      width: calc(100% - 34px);
      overflow: hidden;
      border-radius: 15px;
    }
  }
  .calendar {
    margin: 40px 17px 0 17px;
    border: 1px solid #efefef;
    border-radius: 10px;
    .box {
      padding: 11px;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;

        color: #f71112;
      }
      .content {
        background: #fff;
        margin-top: 13px;
        .items {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .text {
            padding-right: 45px;
            p:nth-child(1) {
              font-size: 13px;
              color: #000000;
              font-weight: bold;
            }
            p:nth-child(2) {
              font-size: 12px;
              color: #676767;
            }
          }
          .img {
            width: 58px;
            height: 52px;
            img {
              border-radius: 7px;
            }
          }
        }
      }
    }
  }
  .songList {
    margin-top: 15px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 17px;
      .newSong {
        .van-button {
          border: none;
          height: auto;
          font-size: 16px;
          &:nth-child(1) {
            margin-right: 10px;
          }
          &:nth-child(3) {
            margin-left: 10px;
          }
        }
        .van-button--normal {
          padding: 0;
        }
        .bold {
          font-weight: bolder;
        }
      }
      h2 {
        font-size: 15px;
      }
      .btn {
        height: 24px;
        white-space: nowrap;
        padding: 0 9px;
        .icon-bofang2 {
          font-size: 9px;
          color: #333333;
          margin-right: 4px;
        }
        .van-button__text {
          font-size: 12px;
        }
      }
    }
    .songBox {
      margin-top: 14px;
      .item {
        position: relative;
        .contont_title {
          width: 80%;
          position: absolute;
          top: 23px;
          left: 11px;
          text-overflow: -o-ellipsis-lastline;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          font-size: 16px;
          color: #fff;
          line-height: 1;
        }
        .imgList {
          position: absolute;
          bottom: 8px;
          left: 11px;
          display: flex;
          img:nth-of-type(n + 3) {
            position: relative;
            transform: translateX(-50%);
          }
        }
        .minImg {
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
        .plays {
          position: absolute;
          right: 5px;
          top: 64px;
          background-color: rgba($color: #f4f3f0, $alpha: 0.7);
          width: 24px;
          height: 24px;
          border-radius: 50%;
          border: 1px solid #e3e3e3;
          text-align: center;
          .icon-bofang2 {
            font-size: 9px;
            color: #fb1819;
          }
        }
        .xuanfu {
          position: absolute;
          top: 0;
          left: 0;
          font-size: 9px;
          color: #ffffff;
          width: 73px;
          background: rgba($color: #999e99, $alpha: 0.3);
          text-align: center;

          span:nth-child(2) {
            font-size: 12px;
            transform: scale(0.8);
          }
        }

        .item_box {
          display: flex;
          align-items: center;
          margin-top: 9px;
          width: calc(100% - 16px);

          background-color: #fff;
          cursor: pointer;
          transition: opacity 0.2s;
          outline: none;
          position: relative;
          &::before {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background-color: #000;
            transform: translate(-50%, -50%);
            opacity: 0;
            content: " ";
          }
          &:active::before {
            opacity: 0.1;
          }
          &:nth-child(1) {
            margin-top: 0;
          }

          .content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: calc(100% - 58px);
            .item_content {
              width: calc(100% - 48px);
              display: flex;
              flex-direction: column;
              margin-left: 9px;
              p {
                display: flex;
                justify-content: start;
                width: 100%;
                span:nth-child(1) {
                  max-width: 70%;
                  display: block;
                  font-size: 12px;
                  color: black;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                }
                span:nth-child(2) {
                  min-width: 30%;
                  display: block;
                  font-size: 10px;
                  color: #969696;
                  transform: scale(0.8);
                  text-overflow: ellipsis;
                  overflow: hidden;
                  white-space: nowrap;
                }
              }
              .tag {
                max-width: 100%;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                font-size: 10px;
                color: #818181;
              }
            }
          }

          .play {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid #e3e3e3;
            text-align: center;
            margin-right: 6px;
            .icon-bofang2 {
              font-size: 9px;
              color: #fb1819;
              margin-left: 3px;
            }
          }
        }
        img {
          width: 100%;
          height: 93px;
          border-radius: 7px;
        }
        .zanting {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-60%, -50%);
          span {
            font-size: 32px;
            color: #fff;
          }
        }
        .amount {
          position: absolute;
          top: 0;
          right: 2px;
          margin: 0;
          span {
            font-size: 12px;
            color: #fff;
          }
        }
        .contont {
          padding-top: 6px;
          font-size: 12px;
          color: #565656;
          overflow: hidden;
          white-space: normal;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          span:nth-child(1) {
            display: block;
            color: #303030;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          span:nth-child(2) {
            color: #9f9f9f;
            font-size: 10px;
            display: block;
          }
        }
      }
      .items {
        height: 165px;
        background-color: #f8f8f8;
        overflow: hidden;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        .img_box {
          position: relative;
          .zan {
            position: absolute;
            left: 8px;
            bottom: 2px;
            font-size: 12px;
            color: #ffffff;
          }
          img {
            width: 105px;
            height: 120px;
          }
        }

        .contont {
          padding: 8px;
          font-size: 10px;
          overflow: hidden;
          white-space: normal;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }
    }
    .songBox::-webkit-scrollbar {
      background-color: transparent;
    }
  }
}
</style>
